<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引用了本地的js文件-->
    <script src="/js/vue.js"></script>
    <!--引用网络的js文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!--通过axios发送异步请求获取所有学生得到信息并展示在网页中-->
<div id="app">
    <table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
         <tr>
             <th>编号</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
             <th>出生日期</th>
             <th>头像</th>
             <td>班级</td>
         </tr>
        <!--jstl标签-->
         <tr v-for="s in students">
             <td>{{s.id}}</td>
             <td>{{s.name}}</td>
             <td>{{s.age}}</td>
             <td>{{s.gender}}</td>
             <td>{{s.birthday}}</td>
             <td>
                 <img :src="s.headimg" width="80"/>
             </td>
             <td>
                 {{s.classInfo.name}}
             </td>
         </tr>
    </table>
</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            students: undefined, // 表示所有的学生。
        },
        created() { // 页面加载的时候就执行这个方法
            this.loadStudent();
        },
        methods: {
            //加载所有学生信息.
            loadStudent() {
                axios.get("/student/list").then(resp => {
                    if(resp.data.code===200){ //===:比较值和数据类型  ==：只比较值
                        //吧查询的结果赋值给students数据。
                        this.students=resp.data.data;
                    }

                })
            }
        }
    })
</script>
</html>